<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/WEB-INF/jsp/include/head.jsp" %>
<%@include file="/WEB-INF/jsp/include/jquery-editview.jsp" %>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Form Elements - Ace Admin</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/chosen.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/daterangepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/colorpicker.css" />

<!-- text fonts -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css"
	id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script
	src="<%=request.getContextPath()%>/ace/assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->
</head>

<body class="no-skin">
	<div class="breadcrumbs" id="breadcrumbs">

		<ul class="breadcrumb">
			<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
			</li>

			<li><a href="#">Tables</a></li>
			<li class="active">Simple &amp; Dynamic</li>
		</ul>
		<!-- /.breadcrumb -->

	</div>

	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>
					Form Elements 
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<form id="drizzt-table" class="form-horizontal"
						action="<%=request.getContextPath()%>/cmsArticle/edit.do"
						method="post">
						<!-- #section:elements.form -->
								<input type="hidden" id="form-field-1" name="id" value="${cmsArticle.id}"
									class="col-xs-10 col-sm-5" />
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 父级栏目 </label>
		
									<div class="col-sm-9">
										<%-- <input type="text" id="form-field-1" placeholder="categoryId"
											name="categoryId" value="${cmsArticle.categoryId}"
											class="col-xs-10 col-sm-5" /> --%>
										<select name="categoryId" class="col-xs-10 col-sm-5">
											<c:forEach items="${ cmsCategories}" var="category">
												<option value="${category.id }" <c:if test="${category.id == cmsArticle.categoryId }">selected="selected"</c:if>>${category.name }</option>
											</c:forEach>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="title"> 标题</label>
		
									<div class="col-sm-9">
										<input type="text" id="title" placeholder="title" required
											name="title" value="${cmsArticle.title}" 
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<%-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 内容 </label>
		
									<div class="col-sm-9">
										<input type="text" id="form-field-1" placeholder="content"
											name="content" value="${cmsArticle.content}"
											class="col-xs-10 col-sm-5" />
											<!-- 加载编辑器的容器 -->
											<script id="container" name="content" type="text/plain" value="${cmsArticle.content}"   >
   					 						</script>
   					 						<div onmousedown="show_element(event)" style="clear:both" name="content"  id="customized-buttonpane" class="editor">${cmsArticle.content}</div>
									</div>
								</div> --%>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 关键字 </label>
		
									<div class="col-sm-9">
										<input type="text" id="form-field-1" placeholder="keywords"
											name="keywords" value="${cmsArticle.keywords}"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 内容 </label>
		
									<div class="col-sm-9">
									<input type="hidden" name="description" id="description" required>
											<div id="odiv" style="display:none;position:absolute;z-index:100;">
											    <img src="${ctxStatic}/jquey-editor/assets/pic/sx.png" title="缩小" border="0" alt="缩小" onclick="sub(-1);"/>
											    <img src="${ctxStatic}/jquey-editor/assets/pic/fd.png" title="放大" border="0" alt="放大" onclick="sub(1)"/>
											    <img src="${ctxStatic}/jquey-editor/assets/pic/cz.png" title="重置" border="0" alt="重置" onclick="sub(0)"/>
											    <img src="${ctxStatic}/jquey-editor/assets/pic/sc.png" title="删除" border="0" alt="删除" onclick="del();odiv.style.display='none';"/>
											</div>
											<div onmousedown="show_element(event)" style="clear:both" name="content"  id="customized-buttonpane" class="editor">${cmsArticle.description}</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 备注 </label>
		
									<div class="col-sm-9">
										<input type="text" id="form-field-1" placeholder="remarks"
											name="remarks" value="${cmsArticle.remarks}"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 是否显示 </label>
		
									<div class="col-sm-9"> 
										<input id="id" name="delFlag" type="radio" value="0" <c:if test="${cmsArticle.delFlag==0}">checked="checked"</c:if>  />显示
										<input id="id" name="delFlag" type="radio" value="1" <c:if test="${cmsArticle.delFlag==1}">checked="checked"</c:if>  />隐藏
									</div>
								</div>
									<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1"> 是否置顶 </label>
		
									<div class="col-sm-9"> 
										<input id="id" name="top" type="radio" value="1" <c:if test="${cmsArticle.top==1}">checked="checked"</c:if>  />置顶
										<input id="id" name="top" type="radio" value="0" <c:if test="${cmsArticle.top==0}">checked="checked"</c:if>  />取消置顶<br />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="creatBy"> 创建人 </label>
		
									<div class="col-sm-9"> 
									<label for="creatBy"></label>
										<input type="text" 
											placeholder="创建人" id="creatBy"
											name="creatBy" value="${cmsArticle.creatBy }"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<input  class="btn btn-info" type="submit"  value="提交" />

								&nbsp; &nbsp; &nbsp;
								<input type="button" class="btn btn-info" type="button" onclick="location.href='<%=request.getContextPath()%>/cmsArticle/list.do'" value="返回" />
							</div>
						</div>
					</form>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
</body>

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.min.js'>"
							+ "<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if ('ontouchstart' in document.documentElement)
		document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>"+ "<"+"/script>");
</script>

<script
	src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js"></script>

<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.onpage-help.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/docs/assets/js/themes/sunburst.css" />
	
        <script src="${ctxStatic }/jquery-validation/1.11.1/dist/jquery.validate.min.js"></script>
    <script src="${ctxStatic }/jquery-validation/1.11.1/dist/additional-methods.js"></script>
    <script src="${ctxStatic }/jquery-validation/1.11.1/localization/messages_zh.js"></script>
    <script>
	$.validator.setDefaults({
		submitHandler: function(form) {
 			//$("#drizzt-table").submit();
 			var val = $("div[id='customized-buttonpane']").html();
 			if(val == null || val == ''){
 				alert("文章内容不能为空");
 				return false;
 			}
 			$("#description").val(val);
            form.submit();
		}
	});
	$().ready(function() {
	    $("#drizzt-table").validate({
	    	rules:{
		    	 creatBy:{
		    		required:true,
		    	 	remote: "${ctx }/checkPhone"
		    	 },
	    	}
	    });
	});
	
	function getContent(){
		alert(2);
		var val = $("div[id='customized-buttonpane']").html();
		if(val == null || val == ''){
			alert("文章内容不能为空");
			return false;
		}
		var creatBy = $("#creatBy").val();
		if(!checkMobile(creatBy)){
			alert("手机号格式不正确");
			return false;
		}
		$("#description").val(val);
		//$("#drizzt-table").submit();
	}
	function checkMobile(str) {
	    var  re = /^1\d{10}$/;
	    if (re.test(str)) {
	        return true;
	    } else {
	        return false;
	    }
	}

	</script>
</html>
